<template>
  <div class="favorites-sidebar">
    <!-- 收藏文件区域 -->
    <div class="sidebar-section">
      <div class="section-header">
        <el-icon><Star /></el-icon>
        <span class="section-title">{{ t('favorites.sidebar.favoriteFiles') }}</span>
      </div>
      <div class="nav-menu">
        <div 
          class="nav-item" 
          :class="{ active: currentType === 'file-all' }"
          @click="handleTypeChange('file-all')"
        >
          <el-icon><Document /></el-icon>
          <span>{{ t('favorites.sidebar.allFavorites') }}</span>
          <el-tag size="small" round>{{ stats.totalFavorites || 0 }}</el-tag>
        </div>
        <div
          class="nav-item"
          :class="{ active: currentType === 'file-recent' }"
          @click="handleTypeChange('file-recent')"
        >
          <el-icon><Clock /></el-icon>
          <span>{{ t('favorites.sidebar.recentFavorites') }}</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: currentType === 'file-documents' }"
          @click="handleTypeChange('file-documents')"
        >
          <el-icon><Document /></el-icon>
          <span>{{ t('favorites.sidebar.documentType') }}</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: currentType === 'file-images' }"
          @click="handleTypeChange('file-images')"
        >
          <el-icon><Picture /></el-icon>
          <span>{{ t('favorites.sidebar.imageType') }}</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: currentType === 'file-videos' }"
          @click="handleTypeChange('file-videos')"
        >
          <el-icon><VideoPlay /></el-icon>
          <span>{{ t('favorites.sidebar.videoType') }}</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: currentType === 'file-others' }"
          @click="handleTypeChange('file-others')"
        >
          <el-icon><Files /></el-icon>
          <span>{{ t('favorites.sidebar.otherType') }}</span>
        </div>
      </div>
    </div>

    <!-- 我的便签区域 -->
    <div class="sidebar-section">
      <div class="section-header">
        <el-icon><EditPen /></el-icon>
        <span class="section-title">{{ t('favorites.sidebar.myNotes') }}</span>
      </div>
      <div class="nav-menu">
        <div 
          class="nav-item" 
          :class="{ active: currentType === 'note-all' }"
          @click="handleTypeChange('note-all')"
        >
          <el-icon><Document /></el-icon>
          <span>{{ t('favorites.sidebar.allNotes') }}</span>
          <el-tag size="small" round>{{ stats.totalNotes || 0 }}</el-tag>
        </div>
        <div
          class="nav-item"
          :class="{ active: currentType === 'note-recent' }"
          @click="handleTypeChange('note-recent')"
        >
          <el-icon><Clock /></el-icon>
          <span>{{ t('favorites.sidebar.recentNotes') }}</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: currentType === 'note-favorite' }"
          @click="handleTypeChange('note-favorite')"
        >
          <el-icon><Star /></el-icon>
          <span>{{ t('favorites.sidebar.favoriteNotes') }}</span>
          <el-tag size="small" round>{{ stats.favoriteNotes || 0 }}</el-tag>
        </div>
        <div 
          class="nav-item" 
          :class="{ active: currentType === 'note-reminder' }"
          @click="handleTypeChange('note-reminder')"
        >
          <el-icon><Bell /></el-icon>
          <span>{{ t('favorites.sidebar.reminderNotes') }}</span>
          <el-tag size="small" round>{{ stats.reminderNotes || 0 }}</el-tag>
        </div>
      </div>

      <!-- 便签文件夹 -->
      <div class="folder-section" v-if="noteFolders.length > 0">
        <div class="folder-header">
          <span>{{ t('favorites.sidebar.customGroups') }}</span>
          <el-button 
            type="text" 
            size="small" 
            :icon="Plus" 
            @click="handleCreateFolder"
          />
        </div>
        <div class="folder-tree">
          <div
            v-for="folder in noteFolders"
            :key="folder.id"
            class="folder-item"
            :class="{ active: currentFolder === folder.id }"
            @click="handleFolderChange(folder.id)"
          >
            <el-icon><Folder /></el-icon>
            <span>{{ folder.name }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签管理区域 -->
    <div class="sidebar-section">
      <div class="section-header">
        <el-icon><PriceTag /></el-icon>
        <span class="section-title">{{ t('favorites.sidebar.tagManagement') }}</span>
      </div>
      <div class="nav-menu">
        <div
          class="nav-item"
          :class="{ active: currentType === 'tags' }"
          @click="handleTypeChange('tags')"
        >
          <el-icon><PriceTag /></el-icon>
          <span>{{ t('favorites.sidebar.tagManagement') }}</span>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import {
  Star, Document, Clock, Picture, VideoPlay, Files, EditPen,
  Bell, Folder, PriceTag
} from '@element-plus/icons-vue'

// Props
interface Props {
  currentType: string
  currentFolder: number | null
  stats: {
    totalFavorites: number
    totalNotes: number
    favoriteNotes: number
    reminderNotes: number
  }
  noteFolders?: Array<{
    id: number
    name: string
  }>
}

const props = withDefaults(defineProps<Props>(), {
  noteFolders: () => []
})

// Emits
const emit = defineEmits<{
  'update:currentType': [value: string]
  'update:currentFolder': [value: number | null]
  'create-folder': []
}>()

const router = useRouter()
const { t } = useI18n()

// 计算属性
const currentType = computed({
  get: () => props.currentType,
  set: (value) => emit('update:currentType', value)
})

const currentFolder = computed({
  get: () => props.currentFolder,
  set: (value) => emit('update:currentFolder', value)
})

// 事件处理
const handleTypeChange = (type: string) => {
  currentType.value = type
  currentFolder.value = null
}

const handleFolderChange = (folderId: number) => {
  currentType.value = 'note-folder'
  currentFolder.value = folderId
}



const handleCreateFolder = () => {
  emit('create-folder')
}


</script>

<style scoped>
.favorites-sidebar {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden; /* 防止横向滚动 */
  padding: 16px 0;
  box-sizing: border-box;
}

.sidebar-section {
  margin-bottom: 24px;
  padding: 0 16px;
  box-sizing: border-box;
  max-width: 100%;
}

.sidebar-section:last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 0;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.section-title {
  flex: 1;
  font-size: 14px;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: var(--el-text-color-regular);
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.nav-item:hover {
  background: var(--el-fill-color-light);
  color: var(--el-text-color-primary);
}

.nav-item.active {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.nav-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item .el-tag {
  margin-left: auto;
  background: var(--el-fill-color);
  border: none;
  color: var(--el-text-color-secondary);
  font-size: 12px;
  flex-shrink: 0;
}

.nav-item.active .el-tag {
  background: var(--el-color-primary-light-8);
  color: var(--el-color-primary);
}

.folder-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.folder-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  color: var(--el-text-color-regular);
}

.folder-item:hover {
  background: var(--el-fill-color-light);
}

.folder-item.active {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.quick-actions .el-button {
  width: 100%;
  justify-content: flex-start;
}
</style>
